import React, { useEffect, useState } from "react";
import axios from "axios";

export default function Medical() {
  const [user, setUser] = useState([]);
  const data = async () => {
    const res = await axios.get("http://192.168.0.154:3000/my/prohect");
    setUser(res.data);
  };
  useEffect(() => {
    data();
  }, []);
  return (
    <div>
      {user.map((item, index) => (
        <div
          key={item.id}
          style={{
            backgroundColor: "#fff",
            padding: "16px",
            borderRadius: "8px",
            boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
            marginBottom: "20px",
          }}
        >
          {/* 项目标题部分 */}

          <div style={{ display: "flex", gap: "12px", marginBottom: "12px" }}>
            <div
              style={{
                width: "40px",
                height: "40px",
                backgroundColor: "#f0f7ff",
                borderRadius: "8px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              📱
            </div>
            <div>
              <div style={{ color: "#666", fontSize: "14px" }}>
                {item.biaohao}
              </div>
              <div style={{ fontSize: "16px", fontWeight: "500" }}>
                {item.name}
              </div>
            </div>
          </div>
          {/* 创建日期和优先级 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "16px",
              marginBottom: "16px",
              color: "#666",
              fontSize: "14px",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
              <span>📅</span>
              <span>{item.shijian}</span>
            </div>
            <div
              style={{
                backgroundColor: "#fff7e6",
                color: "#faad14",
                padding: "2px 8px",
                borderRadius: "4px",
                fontSize: "12px",
              }}
            >
              中
            </div>
          </div>
          {/* 项目数据 */}
          <div
            style={{
              borderTop: "1px solid #f0f0f0",
              paddingTop: "12px",
              marginTop: "12px",
            }}
          >
            <div
              style={{ fontSize: "14px", color: "#666", marginBottom: "8px" }}
            >
              项目数据
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                fontSize: "14px",
              }}
            >
              <div>
                <div>所有任务</div>
                <div style={{ textAlign: "center", fontWeight: "500" }}>
                  {item.suoyourenwu}
                </div>
              </div>
              <div>
                <div>当前任务</div>
                <div style={{ textAlign: "center", fontWeight: "500" }}>
                  {item.dangqianrenwu}
                </div>
              </div>
              <div>
                <div>执行人</div>
                <div style={{ display: "flex", gap: "-8px" }}>
                  {/* 头像组 */}
                  {[item.img1, item.img2, item.img3].map((cItem, index) => {
                    return (
                      <img
                        key={index}
                        src={cItem}
                        alt={`User ${index + 1}`}
                        style={{
                          width: "24px",
                          height: "24px",
                          borderRadius: "50%",
                          border: "2px solid white",
                          marginLeft: index > 0 ? "-8px" : "0",
                        }}
                      />
                    );
                  })}
                  <div
                    style={{
                      width: "24px",
                      height: "24px",
                      borderRadius: "50%",
                      backgroundColor: "#f0f0f0",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontSize: "12px",
                      marginLeft: "-8px",
                      border: "2px solid white",
                    }}
                  >
                    +2
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
